<template>
    <div class="body">
      <div class="stars" ref="starsRef">
        <div class="star" v-for="(item, index) in starsCount" :key="index"></div>
      </div>
      <div id="building">
    <div class="handle-box" >
      <el-select v-model="searchid" placeholder="请选择筛选方式">
        <el-option v-for="item in options1" :label="item.label" :key="item.key" :value="item.value">
        </el-option>
      </el-select>
      <el-input placeholder="筛选信息" v-model="searchWord" style="width: 100px"></el-input>
      <el-button type="primary" @click="searchfor(searchid)">查询信息</el-button>
      <el-button type="primary" @click="dialogVisible1= true">添加信息</el-button>
    </div>
    <el-table height="550px" border size="small" :data="tableData.slice((currentpage - 1)*pageSize, currentpage * pageSize)" style="width: 100%" >
      <el-table-column label="ID" prop="id" width="160" align="center"></el-table-column>
      <el-table-column label="姓名" prop="name" width="130" align="center"></el-table-column>
      <el-table-column label="性别" prop="sex" width="130" align="center"></el-table-column>
      <el-table-column label="年龄" prop="age" width="130" align="center"></el-table-column>
      <el-table-column label="入住时间" prop="time" width="130" align="center"></el-table-column>
      <el-table-column label="病因" prop="result" width="130" align="center"></el-table-column>
      <el-table-column label="床号" prop="number" width="130" align="center"></el-table-column>
      <el-table-column   label="操作" width="130" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">
            修改
          </el-button>
        </template>
      </el-table-column>
      <el-table-column   label="操作" width="130" align="center">
        <template slot-scope="scope">
          <el-button @click.native.prevent="deleteRow(scope.row.id)" type="text" size="small">
            出院
          </el-button>
        </template>
      </el-table-column>
      <el-table-column   label="操作" width="130" align="center">
        <template slot-scope="scope">
          <router-link :to="{path:'/physis',query:{id:scope.row.id}}">生理数据</router-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, prev, pager, next, jumper"
      :current-page="currentpage"
      :page-size="pageSize"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
      </div>
  <!-- 添加弹窗-->
  <el-dialog title="增加信息"
             :visible.sync="dialogVisible1"
             width="30%" center>
    <el-form label-width="80px" :model="registerForm"  :rules="rules">
      <el-form-item label="ID" prop="id">
        <el-input v-model="registerForm.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="registerForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
          <el-input v-model="registerForm.sex"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="registerForm.age"></el-input>
      </el-form-item>
      <el-form-item label="入住日期" prop="time">
        <el-date-picker type="date" v-model="registerForm.time"></el-date-picker>
      </el-form-item>
      <el-form-item label="病因" prop="result">
        <el-input type="textarea" v-model="registerForm.result"></el-input>
      </el-form-item>
      <el-form-item label="床号(区号房间号)" prop="number">
        <el-input  v-model="registerForm.number"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible1=false">取 消</el-button>
        <el-button type="primary" @click="addpatient()">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 编辑弹出框 -->
  <el-dialog title="编辑信息" :visible.sync="dialogVisible2"
             width="30%" center>
    <el-form label-width="80px" :model="editForm"  :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="editForm.name"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input v-model="editForm.sex" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="editForm.age"></el-input>
      </el-form-item>
      <el-form-item label="入住日期" prop="time">
        <el-date-picker type="date" v-model="editForm.time" :disabled="true" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="病因" prop="result">
        <el-input type="textarea" v-model="editForm.result"></el-input>
      </el-form-item>
      <el-form-item label="床号" prop="number">
        <el-input  v-model="editForm.number" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2=false">取 消</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 出院提示框 -->
  <el-dialog title="提示" :visible.sync="dialogVisible3"
             width="30%"  center>
    <div class="del-dialog-cnt" align="center">是否确定出院？</div>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible3=false">取 消</el-button>
          <el-button type="primary" @click="deletepatient()">确 定</el-button>
        </span>
    </template>
  </el-dialog>
  </div>

</template>

<script>
import { onMounted, ref } from "vue";
export default {
  name: "message",
  data(){
    return{
    tableData:[
      {
        id:'2',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'1'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'4',
        name:'张榆松',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'22'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'熊诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
      {
        id:'3',
        name:'张诗伟',
        sex:'女',
        age:'21',
        time:'6.1',
        result:'心痛',
        number:'2'
      },
    ],
    options1:[
      {
        value:'1',
        label:"ID",
        key:'1'
      },
      {
        label: "姓名",
        value:'2',
        key:'2'
      },
      {
        value:'3',
        label: "性别",
        key:'3'
      },
      {
        value:'4',
        label:"年龄",
        key:'4'
    },
      {
        value:'5',
        label: "入住时间",
        key:'5'
      },
      {
        value:'6',
        label: "病因",
        key:'6'
      },
      {
        value:'7',
        label: "房间号（格式：区号-房间号）",
        key:'7'
      },
  {
    value:'8',
    label: "区号",
    key:'8'
  }],
    searchid:'',
    searchWord:'',
    pageSize:'10',
    currentpage:'1',
    sexnumber:'',
    dialogVisible1:false,
    dialogVisible2:false,
    dialogVisible3:false,
    editForm:{
      id:'',
      name:'',
      sex:'',
      age:'',
      time:'',
      result:'',
      number:''
    },
    registerForm:{
        id:'',
        name:'',
        sex:'',
        age:'',
        time:'',
        result:'',
        number:''
      },
      rules: {
        name: [
          {required: true, message: " 姓名不可为空", trigger: 'blur'}
        ],
        sex: [
          {required: true, message: " 性别不能为空 ", trigger: 'blur'}
        ],
        age: [
          {required: true, message: " 年龄不可为空 ", trigger: 'blur'}
        ],
        time: [
          {required: true, message: " 日期不可为空 ", trigger: 'blur'}
        ],
        result: [
          {required: true, message: " 病因不可为空 ", trigger: 'blur'}
        ],
        number: [
          {required: true, message: " 床号不可为空 ", trigger: 'blur'}
        ]
      },
      deleteId:'',
    }
  },
  created(){
    axios.get('http://localhost:8080/patient/ByTime',{params:{startIndex:0,pageSize:1000}}).then(res=>{
      console.log(res.data);
      this.tableData=res.data.tableData;
    })
  },
  methods:{
    handleSizeChange(val) { //每页条数
      this.pageSize = val;
    },
    handleCurrentChange(val) { //跳转页码
      this.currentpage= val;
    },
    searchfor(id){
      axios.get('http://localhost:8080/patient/ByNumber',{params:{number:id,name:this.searchWord,startIndex:0,pageSize:1000}}).then(res=>{
      console.log(res.data.tableData);
       this.tableData=res.data.tableData;
      })
    },
    addpatient(){
      alert(this.registerForm.time);
      const year = this.registerForm.time.getFullYear();
      const month = this.registerForm.time.getMonth()+1;
      const day = this.registerForm.time.getDate();
      const tomorrowDateString = `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
      this.registerForm.time=tomorrowDateString;
      alert(this.registerForm.time);
  axios.post('http://localhost:8080/patient/InsertPatient',this.registerForm).then(res=>{
  if(res.data.state==1){
    this.$message({
      message: '新增成功',
    });
    this.$router.go(0);
  }
  else if(res.data.state==2) {
    this.$message({
      message: '增加失败,病人已在院',
      type:'warning'
    });
  }
  else if(res.data.state==3){
    this.$message({
      message: '增加失败,没有该房间',
      type:'warning'
    });
  }
  else{
    this.$message({
      message: '增加失败,该房间已满',
      type:'warning'
    });
  }
});
      //this.registerForm.id=' ';this.registerForm.name=' ';this.registerForm.sex=' ';this.registerForm.age=' ';this.registerForm.time=' ';this.registerForm.result=' ';this.registerForm.number=' ';
      this.dialogVisible1=false
    },
    saveEdit(){
      console.log(this.editForm);
      axios.put('http://localhost:8080/patient/updatePatient',this.editForm).then(res=>{
        if(res.data.state==1){
          this.$message({
            message: '更新成功'
          });
          this.$router.go(0);
        }
        else if(res.data.state==2) {
          this.$message({
            message: '更新失败,没有该病人',
            type:'warning'
          });
        }
        else if(res.data.state==3){
          this.$message({
            message: '更新失败,没有该房间',
            type:'warning'
          });
        }
        else{
          this.$message({
            message: '更新失败,该房间已满',
            type:'warning'
          });
        }
      });
      //this.editForm.id=' ';this.editForm.name=' ';this.editForm.sex=' ';this.editForm.age=' ';this.editForm.time=' ';this.editForm.result=' ';this.editForm.number=' ';
      this.dialogVisible2=false
    },
    deletepatient(){
      let ID=this.deleteId;
      axios.delete('http://localhost:8080/Out/applyfor',{data:ID}).then(res=>{
        if(res.data==1){
          this.$message({
            message: '出院成功'
          });
          this.$router.go(0);
        }
        else{
          this.$message({
            message: '出院失败',
            type:'warning'
          });
        }
      });
      this.dialogVisible3=false

    },
    editRow(row){
      this.dialogVisible2 = true;
      this.editForm.id=row.id;
      this.editForm.name=row.name;
        this.editForm.sex =row.sex;
      this.editForm.age=row.age;
      this.editForm.time=row.time;
      this.editForm.result=row.result;
      this.editForm.number=row.number;
    },
    deleteRow(id){
      this.dialogVisible3 = true;
      this.deleteId=id;
    },
  },
  setup() {
    let starsRef = ref(null);

    const starsCount = 800; //星星数量
    const distance = 900; //间距

    onMounted(() => {
      let starNodes = Array.from(starsRef.value.children);
      starNodes.forEach((item) => {
        let speed = 0.2 + Math.random() * 1;
        let thisDistance = distance + Math.random() * 300;
        item.style.transformOrigin = `0 0 ${thisDistance}px`;
        item.style.transform = `
        translate3d(0,0,-${thisDistance}px)
        rotateY(${Math.random() * 360}deg)
        rotateX(${Math.random() * -50}deg)
        scale(${speed},${speed})`;
      });
    });

    return {
      starsRef,
      starsCount,
    };
  },
}
</script>

<style scoped>
#building {
  /*设置透明度，0为完全透明，1为不透明*/
  opacity: 0.50;
}
.body {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: radial-gradient(
    200% 100% at bottom center,
    #f7f7b6,
    #e96f92,
    #1b2947
  );
  background: radial-gradient(
    200% 105% at top center,
    #1b2947 10%,
    #75517d 40%,
    #e96f92 65%,
    #f7f7b6
  );
  background-attachment: fixed;
  overflow: hidden;
}

@keyframes rotate {
  0% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg) rotateY(0);
  }
  100% {
    transform: perspective(400px) rotateZ(20deg) rotateX(-40deg)
    rotateY(-360deg);
  }
}
.stars {
  transform: perspective(500px);
  transform-style: preserve-3d;
  position: absolute;
  perspective-origin: 50% 100%;
  left: 45%;
  animation: rotate 90s infinite linear;
  bottom: 0;
}
.star {
  width: 2px;
  height: 2px;
  background: #f7f7b6;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility: hidden;
}
</style>
